import React from 'react';
import { Modal, View, Text, StyleSheet, Pressable } from 'react-native';
import { COLORS } from '../styles/constants';

export default function LocationPermissionModal({ visible, onAllow, onDeny }) {
  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      statusBarTranslucent
      hardwareAccelerated
      onRequestClose={onDeny}
    >
      <View style={styles.backdrop} pointerEvents="auto">
        <View style={styles.box}>
          <Text style={styles.title}>需要定位权限</Text>
          <Text style={styles.desc}>
            用于识别当前城市，提供附近景点与行程推荐。
          </Text>
          <View style={styles.row}>
            <Pressable
              hitSlop={12}
              onPress={onDeny}
              style={[styles.btn, styles.btnGhost]}
            >
              <Text style={styles.btnGhostText}>拒绝</Text>
            </Pressable>
            <Pressable
              hitSlop={12}
              onPress={onAllow}
              style={[styles.btn, styles.btnPrimary]}
            >
              <Text style={styles.btnPrimaryText}>允许</Text>
            </Pressable>
          </View>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  backdrop: {
    flex: 1,
    backgroundColor: 'rgba(15,23,42,0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: { width: '80%', backgroundColor: COLORS.background.card, borderRadius: 12, padding: 16 },
  title: { fontSize: 16, fontWeight: '700', color: COLORS.text.primary },
  desc: { marginTop: 8, color: COLORS.text.secondary, lineHeight: 20 },
  row: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 16 },
  btn: {
    paddingHorizontal: 14,
    paddingVertical: 8,
    borderRadius: 8,
    marginLeft: 8,
  },
  btnGhost: { backgroundColor: COLORS.background.secondary },
  btnGhostText: { color: COLORS.text.secondary },
  btnPrimary: { backgroundColor: COLORS.primary },
  btnPrimaryText: { color: '#fff', fontWeight: '600' },
});
